<template>
  <view class="website-message">
    <u-navbar title="站内消息" title-color="#000" back-icon-color="#000" :background="background" :border-bottom="false">
    </u-navbar>

    <view class="tab-list u-f-ac">
      <view class="u-f-ajc u-f-column tab-item" v-for="(item, index) in tabsList" :key="index" @click="$u.route(`/mine-module/website-message2?id=${index+1}`)">
        <image :src="item.image" mode="widthFix"></image>
        <view>{{item.name}}</view>
      </view>
    </view>

    <view class="message-container">
      <mescroll-body ref="mescrollRef" top="80" :down="down" @down="downCallback" @up="upCallback">
        <uni-swipe-action class="message-list">
          <block v-for="(message, index) in messageList" :key="index">
            <uni-swipe-action-item :right-options="options" @click="handleMessage(index)">
              <view class="message-item u-f u-f-jsb">
                <u-image width="110" height="110" src="/static/images/member/message-avatar.png"></u-image>
                <view class="u-f1 u-m-l-20">
                  <view class="u-f-ac u-f-jsb">
                    <view class="msg-title">
                      {{ message.title || '聚千聚商城' }}
                    </view>
                    <view class="msg-date">
                      {{ message.send_time | unixToDate }}
                    </view>
                  </view>
                  <view class="msg-detail text-overflow2">
                    {{ message.content }}
                  </view>
                </view>

              </view>
            </uni-swipe-action-item>
          </block>
        </uni-swipe-action>
      </mescroll-body>
    </view>
  </view>
</template>

<script>
  import * as API_Message from '@/api/message.js'
  import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"
  export default {
    mixins: [MescrollMixin],
    data() {
      return {
        tabsList: [{
            name: '账户通知',
            image: '/static/images/member/zhanghutongzhi.png',
          },
          {
            name: '物流通知',
            image: '/static/images/member/wuliutongzhi.png',
          },
          {
            name: '优惠促销',
            image: '/static/images/member/youhuicuxiao.png',
          },
          {
            name: '服务通知',
            image: '/static/images/member/fuwutongzhi.png',
          }
        ],
        current: 1,
        params: {
          page_no: 1,
          page_size: 10
        },
        messageList: [], //消息列表
        options: [{
          text: '删除',
          style: {
            backgroundColor: '#FD5B00'
          }
        }],
        down: {
          auto: false //是否在初始化完毕之后自动执行一次下拉刷新的回调
        },
        background: {
          background: 'rgba(0,0,0,0)',
          // background: 'url(../../../static/images/member/cart-bg.png) no-repeat',
          // backgroundSize: 'cover'
        },
      }
    },
    methods: {
      changeTabs(index) {
        this.current = index
        this.messageList = []
        this.params.page_no = 1
        this.mescroll.resetUpScroll(true)
      },
      //下拉刷新
      downCallback() {
        this.changeTabs(this.current)
      },
      //上拉加载
      upCallback(page) {
        this.params.page_no = page.num
        this.getMessages()
      },
      //左滑删除事件
      handleMessage(index) {
        let that = this
        const id = this.messageList[index].id
        uni.showModal({
          title: '提示',
          content: '确定要删除这条消息吗？',
          confirmColor: '#FD5B00',
          success(res) {
            if (res.confirm) {
              API_Message.deleteMessage(id).then(() => {
                uni.showToast({
                  title: '删除成功'
                })
                that.downCallback()
              })
            }
          }
        })
      },
      //获取站内消息列表
      getMessages() {
        const params = JSON.parse(JSON.stringify(this.params))
        if (this.current !== 1) {
          params.read = 0
        } else {
          delete params.read
        }
        API_Message.getMessages(params).then(async response => {
          const {
            data
          } = response
          if (data && data.length) {
            if (params.read === 0) {
              const ids = data.map(item => item.id).join(',')
              await API_Message.messageMarkAsRead(ids)
            }
            this.messageList.push(...data)
          }
          this.mescroll.endBySize(data.length, response.data_total);
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  page {
    width: 100%;
    background: url(/static/images/member/cart-bg.png) no-repeat 0 0;
    background-size: 100% 400rpx;
    background-color: #ffffff;
  }

  .tab-list {
    .tab-item {
      width: 25%;
      height: 230rpx;
      border-bottom: 1px solid #F8F8F8;
      color: #000;

      image {
        width: 100rpx;
        margin-bottom: 10rpx;
      }
    }
  }

  .website-message {
    padding: 0 30rpx;
    box-sizing: border-box;

    /deep/.mescroll-body {
      min-height: 1166rpx;
      padding-top: 36rpx !important;
    }

    .message-list {
      .message-item {
        width: 100%;
        align-items: flex-start;
        margin-bottom: 54rpx;
      }
      .msg-title {
        font-size: 30rpx;
        font-weight: 400;
        color: #000;
      }
      .msg-detail {
        margin-top: 20rpx;
        font-size: 24rpx;
        color: #999;
      }

      .msg-date {
        font-size: 26rpx;
        color: #999;
      }



    }
  }
</style>